/*v20200514*/
@charset "utf-8";

/*title*/
.comm_h1,.comm_h1_tab{position:relative;padding:0px;margin:0px;}
.comm_h1 span,.comm_h1_tab .a_tabs{
  float:left;
  font-weight:400;
  font-size:18px;
  border:1px solid transparent;
  color:#333333;
  height:46px;
  line-height:46px;
  border-radius: 0px;
  font-weight: bold;
}
.comm_h1,.comm_h1_tab {
  border-bottom:1px solid transparent;

}
.comm_h1 span img{margin-right:8px;}
.comm_h1_tab .a_tabs{
  padding-left:10px;padding-right:10px;width:auto;
  color:#007ab6;margin-right:15px;
}

.comm_h1_tab .active .a_tabs:hover,
.comm_h1_tab .active .a_tabs,
.comm_h1_tab .a_tabs:hover,
.comm_h1_tab .a_tabs:active,
.comm_h1_tab .a_tabs:focus{
  cursor:pointer;
  border:1px solid transparent;
  color:#fff;
  background: #007ab6;
}

.comm_h1 span,.comm_h1_tab .a_tabs{position: relative;}

a.comm_more i,
.more_btn i{margin-right:10px;}
a.comm_more,.more_btn{
  font-size:14px;color:#9a9a9a;padding:17px 0 0 0 ;
  background:none;
  border:none;}
a.comm_more:hover,.more_btn:hover{color:#eb8602;}

.more_btn{position:relative;padding-top:18px;z-index:9999;margin-top:-45px;float:right;}

/*mod1*/
.main_mod1_a,
.main_mod1_b,
.main_mod1_c{
  
}
.main_mod1_c .comm_h1_tab span,
.main_mod1_c .comm_h1_tab a{
  color:#007ab6;width:auto;
  padding:0px 5px;
  text-align:center;
}
.main_mod1_c .comm_h1_tab li{padding-left:30px;margin-right:5px;}
.main_mod1_c .comm_h1_tab li:nth-child(1){
  background:transparent url(whyts_left_icon1.png) left center no-repeat;
}
.main_mod1_c .comm_h1_tab li:nth-child(2){
  background:transparent url(whyts_left_icon2.png) left center no-repeat;
}
.main_mod1_c .comm_h1_tab li:hover:nth-child(1),
.main_mod1_c .comm_h1_tab li.active:nth-child(1){
  background:#007ab6 url(whyts_left_icon1_hov.png) left center no-repeat;
}
.main_mod1_c .comm_h1_tab li:hover:nth-child(2),
.main_mod1_c .comm_h1_tab li.active:nth-child(2){
  background:#007ab6 url(whyts_left_icon2_hov.png) left center no-repeat;
}
.main_mod1_a .comm_h1{border-bottom:none;}
.main_mod1_a .main_mod1_text{border:1px solid #cdcdcd;background:#ebf0fa;padding:10px 15px;}
.main_mod1_a .main_mod1_text .comment_list li{
  padding-top:4px;
  padding-bottom:4px;
  padding-left:10px;
  background:url(bodyBg.jpg) left 18px no-repeat;
}
.main_mod1_a .main_mod1_text .comment_list li a{
  width:100%;font-size:16px;
  display: block;
  -webkit-box-orient: inherit;
  -webkit-line-clamp: inherit;
  overflow: hidden;
  width:100%;
}



@media(min-width:992px) and (max-width:1400px){
  .main_mod1_a .main_mod1_text .comment_list li a{
    width:100%;font-size:15px;
    display: block;
    -webkit-box-orient: inherit;
    -webkit-line-clamp: inherit;
    overflow: hidden;
    width:100%;
  }
}


.main_mod1_tab{padding:15px 0px;background: #007ab6;}
.marquee-1{ 
  width:100%; height:260px;
  border:none; 
  overflow:hidden; margin: 0;
  padding: 0;
}
.marquee-1 ul{float:left; width: auto; padding:0px 10px;}
.marquee-1 ul li{border-bottom:1px dashed #aeaeae;padding:8px 0;line-height:24px; color:#999999;margin-bottom:10px;}
.marquee-1 ul li font{
  font-size:12px;color:#fff;padding-left:15px;
  white-space:nowrap;
}
.marquee-1 ul li a{color:#fff;font-size:16px;}
.marquee-1 ul li a:hover{color:#ffcd56;}

.marquee-2{width:100%; height:258px;overflow:hidden; margin: 0;}
.marquee-2 ul{float:left; width: auto;}

.main_mod1_b_text{position:relative;}
.main_mod1_b_text .comment_list{margin-top:15px;}
.main_mod1_b_text .more_btn{position: absolute;top:15px;padding-top:0px;right:0px;}
.mod1_left1_img{text-align:left;}
.mod1_left1_img a{
  display: block;
  overflow: hidden;
  position: relative;
}
.mod1_left1_img a img{width:100%;max-width:204px;max-height:130px;}
.mod1_left1_img a img{ 
  -webkit-transition: all 0.5s; 
  -moz-transition: all 0.5s; 
  -o-transition: all 0.5s;
}
.mod1_left1_img a img:hover {
  -webkit-transform: scale(1.1); 
  -moz-transform: scale(1.1); 
  -o-transform: scale(1.1); 
  -ms-transform: scale(1.1); 
}
.mod1_left1_img a::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

.mod1_left1_img a:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.mod1_left1_img a{color:#444;}
.mod1_left1_img a:hover{color:#f09236;}
.mod1_left1_text{margin-top:-5px;}

.main_mod1_b_text .comment_list li{
  padding:4px 0px 5px 0px;
  padding-left:15px;background:url(whyts_list.png) left 15px no-repeat;

}
@media(min-width:1440px){
  .main_mod1_b_text .comment_list li{
    padding:3px 0px 3px 0px;
    padding-left:15px;background:url(whyts_list.png) left 15px no-repeat;

  }
}
@media(min-width:991px){
  .main_mod1_b_text .comment_list li a{width:99%;}
}

.main_mod1_b_text .comment_list li a:hover{color:#ce5636;}

.mod1_left1_text h4{margin:0px;}
.mod1_left1_text h4 a{
  font-size:16px;
  padding-top:5px;
  color:#666666;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 30px;
  white-space:inherit;
}
.mod1_left1_text h4 a:hover{color:#f69806;}

@media (max-width:1439px) and (min-width: 992px){
  .mod1_left1_img{width:40%;}
  .mod1_left1_text{width:60%;}
}
@media (min-width: 1440px){
  .mod1_left1_img{width:30%;}
  .mod1_left1_text{width:70%;}
}

@media screen and (max-width: 991px){
  .mod1_left1_text h4 a{
    display: block;
      -webkit-box-orient: inherit;
      -webkit-line-clamp: inherit;
      overflow: hidden;
      white-space:inherit;
      font-size: 16px;
      line-height: 24px;
  }
  .main_mod1_b_text .comment_list li{
    padding-left:15px;background:url(whyts_list.png) left 20px no-repeat;
  }
  .main_mod1_b_text .comment_list{margin-top:20px;}
}
@media screen and (max-width: 768px){
  .mod1_left1_img{text-align:center;}
}
@media screen and (max-width: 480px){
  .mod1_left1_text h4 a{padding-top:3px;} 
}

.main_mod2{
  background:rgba(201, 218, 244, 0.5);
}
.main_mod2 .comm_h1,
.main_mod2 .comm_h1_tab{border-bottom:1px solid #eee;}
.main_mod2 .comm_h1 span{border-bottom:3px solid #d53030;line-height:36px;}
.main_mod2 .comm_h1_tab .a_tabs{line-height:36px;}
.main_mod2 .comm_h1_tab .a_tabs{color: #333;margin-right:10px;padding:0px;}
.main_mod2 .comm_h1_tab .active .a_tabs:hover, 
.main_mod2 .comm_h1_tab .active .a_tabs, 
.main_mod2 .comm_h1_tab .a_tabs:hover, 
.main_mod2 .comm_h1_tab .a_tabs:active, 
.main_mod2 .comm_h1_tab .a_tabs:focus{
  background:transparent;
  color: #333;
}

.main_mod2 .comm_h1_tab .active:nth-child(1) .a_tabs:hover, 
.main_mod2 .comm_h1_tab .active:nth-child(1) .a_tabs, 
.main_mod2 .comm_h1_tab li:nth-child(1) .a_tabs:hover, 
.main_mod2 .comm_h1_tab li:nth-child(1) .a_tabs:active, 
.main_mod2 .comm_h1_tab li:nth-child(1) .a_tabs:focus{
  border-bottom:3px solid #d76d05;
}
.main_mod2 .comm_h1_tab .active:nth-child(2) .a_tabs:hover, 
.main_mod2 .comm_h1_tab .active:nth-child(2) .a_tabs, 
.main_mod2 .comm_h1_tab li:nth-child(2) .a_tabs:hover, 
.main_mod2 .comm_h1_tab li:nth-child(2) .a_tabs:active, 
.main_mod2 .comm_h1_tab li:nth-child(2) .a_tabs:focus{
  border-bottom:3px solid #087eb8;
}
.main_mod2 .comment_list li{
  padding: 5px 0px 4.5px 15px;
}
.main_mod2 .more_btn{margin-top:-60px;}

/* mod3 */
.main_mod3 h1{padding:0px;margin:0px;}
.mod3_a,
.mod3_b,
.mod3_c,
.mod3_d{margin-top:40px;}
.main_mod3 h1{line-height:22px;margin-bottom:10px;font-weight: bold;}
.main_mod3 h1 span{
  float: left;
  font-size:18px;border-left:3px solid #007ab6;color:#333;
  padding-left: 15px;
}
.main_mod3 h1 .comm_more{padding:0px;}

.examples_image{
  float:left;
  padding: 0px;
  position:relative;
  overflow:hidden;
  color:#fff;
}
.examples_image img{max-width:100%;height:180px;}
/* image_thumb section CSS */
.mune_thumb{
  float:left;
  overflow:hidden;
  padding-right: 0px;
}
.mune_thumb img{border:3px solid transparent;}
.mune_thumb ul{margin:0;padding:0;list-style:none;}
.mune_thumb ul li{width:100%;height:45px;color:#333;margin:0;padding:0px;float:left;}
.mune_thumb ul li img{width:100%;height:45px;margin-bottom:2px;}
.mune_thumb ul li.hover img{border:2px solid #007ab6;}
.mune_thumb ul li.active img{border:2px solid #007ab6;}

.mod3_b .comment_list li {padding:4px 0px 4px 15px;}
.mod3_b .comment_list li a{width:95%;}
.mod3_c > a{margin-bottom:31px;}
.mod3_c > a img{width:100%;}

/* scrollpic */
.mr_frbox {position: relative;z-index:0;}
.mr_frBtnL { float: left; cursor: pointer; display: inline; position:absolute; top:37px;z-index:999;left:5px;}
.mr_frUl { float: left;width:100%; padding:10px 0px 8px 16px;}
.mr_frBtnR { float: right; cursor: pointer; position:absolute; top:37px;z-index:999;right:5px;}
.mr_frUl ul li { display: inline; float: left;overflow: hidden; zoom:1; vertical-align:middle;padding:0; margin:0;}
.mr_frUl ul li img { display: block; }

.scrollpic{
  max-width:100%; width:100%;border: 1px solid #eee;
  position:relative;margin-top:0px;
}
.mr_frbox{
  display:block; 
  width:100%; position:relative;height:93px; overflow:hidden;
  position: relative;z-index:0;
}

.mr_frbox ul{display:block; float:left; list-style-type:none; padding:0; margin:0;}
.mr_frbox ul li .cp_img{
  display:block; float:left; 
  width:110px; padding:0 5px; position:relative; 
  height:73px; color:#333;
  
}

.mr_frbox ul li .cp_img>img{width:100%;}

@media (min-width: 992px) {
    .mr_frUl{width:234px;overflow:hidden;}
}
@media (min-width: 1200px) {
    .mr_frUl{width:234px;overflow:hidden;}
}
@media (min-width:1440px) {
    .mr_frbox{height:110px;padding-top:5px;}
    .mr_frBtnL,.mr_frBtnR{top:50px;}
    .mr_frUl{width:290px;margin-left:12px;height:110px;overflow:hidden;}
    .mr_frbox ul li .cp_img{
      display:block; float:left; 
      width:132px; padding:0 5px; position:relative; 
      height:95px; color:#333;
      
    }
}
@media (max-width: 1199px) {
    .mr_frUl{width:188px;overflow:hidden;}
}
@media(max-width:992px){
.scrollpic{width:320px;height:105px;}
.mr_frbox{padding-top:5px;}
.mr_frBtnL,.mr_frBtnR{top:45px;}
.mr_frUl{width:290px;overflow:hidden;margin-left:12px;}
.mr_frbox ul li .cp_img{width:132px;}
}



/*浏览器宽度变化时需刷新页面才能正常显示*/

/* 推荐 */
.select_right{position:relative;}
.select_right i{
  position:absolute;
  text-align:center;
  line-height:20px;
  width:20px;height:20px;
  background:#1886bb;
  font-weight: 400;
  color: #fff;
  right: 20px;
  top: 8px;
  border-radius: 50%;
  cursor: pointer;
}
.select_right select{
  width:100%;padding-left:10px;
  border:1px solid #ddd;background:#eff5fe;height:35px;
  line-height: 30px;
  cursor: pointer;
}

@media (max-width: 1199px) {
    .mod3_c > a{margin-bottom:22px;}
    .mod3_c > a img{height:75px;}
    .mod3_d >div:nth-child(2){margin-top:10px;}
    .mod3_b .comment_list li{padding:3px 0px 3px 15px;}
    .examples_image img{max-width:100%;height:172px;}
    .mune_thumb ul li{
      width:100%;height:auto;color:#333;margin:0;padding:0px;float:left;}
    .mune_thumb ul li img{width:100%;height:42px;}
    .select_right:first-child{padding-right:5px;}
    .select_right:last-child{padding-left:5px;}
}
@media (min-width: 1440px) {
    .mod3_c > a{margin-bottom:25px;}
    .mod3_d >div:nth-child(2){margin-top:30px;}
    .mod3_b .comment_list li{padding:7px 0px 7px 15px;}
    .examples_image img{max-width:100%;height:215px;}
    .mune_thumb ul li{
      width:100%;height:auto;color:#333;margin:0;padding:0px;float:left;}
    .mune_thumb ul li img{width:100%;height:52px;}
}

@media (max-width: 992px) {
  
  .mod3_a .examples_image{width:126px;}
  .mod3_a .examples_image img{width:100%;height:173px;}
  .mod3_a .mune_thumb{width:100px;}

  .mod3_c > a img{height:auto;max-width:303px;}
  .mod3_d >div:nth-child(2){margin-top:30px;}
  .select_right{margin-top:10px;}
}


/* --mod4 */
.main_mod4{background:rgba(201, 218, 244, 0.5);padding:30px 0;}
.main_mod4 a{float:left;width:14.28%;text-align:center;}
.main_mod4 a img{border-radius: 50%;}
.main_mod4 a span{
  font-size:14px;color:#444444;
  margin-top: 15px;
  text-align:center;width:111px;display:inline-block;
}
.main_mod4 a:hover img{
  -webkit-box-shadow: 0px 0px 25px #87d7ff;
  -moz-box-shadow: 0px 0px 25px #87d7ff;
  box-shadow: 0px 0px 25px #87d7ff;
}
.main_mod4 a:hover span{color:#007ab6;}

@media (max-width: 991px) and (min-width:768px) {
  .main_mod4 a span{
    font-size:13px;color:#444444;
    margin-top: 15px;
    text-align:center;width:95px;display:inline-block;
  }
}
@media (max-width: 767px) {
  .main_mod4 a{float:left;width:33.333%;text-align:center;margin-bottom:30px;}
}